Razor একটি উচ্চ ক্ষমতাসম্পন্ন, হালকা ওজনের টেমপ্লেট ইঞ্জিন যা ASP.Net অ্যাপ্লিকেশনে ডাইনামিক HTML তৈরি করতে ব্যবহৃত হয়। Razor সঠিকভাবে C# কোড এবং HTML মার্কআপ একত্রিত করতে সাহায্য করে, যা ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনগুলিতে ব্যবহার করা হয়। Razor সিনট্যাক্সের মাধ্যমে, আপনি সহজে ডাইনামিক কন্টেন্ট যেমন ভেরিয়েবল, লুপ, কন্ডিশনাল লজিক ইত্যাদি HTML পেজে এম্বেড করতে পারেন।

Razor সিনট্যাক্সের মৌলিক ধারণা

1. Razor কোড ব্লক: Razor কোড ব্লক শুরু হয় @ চিহ্ন দিয়ে এবং তারপর C# কোড লেখা হয়।

   উদাহরণ:

   @{
       var greeting = "Hello, World!";
   }
   

2. HTML এবং Razor কোডের সংমিশ্রণ: Razor আপনাকে HTML এর সাথে C# কোড লিখতে অনুমতি দেয়, এবং Razor কোড HTML এর মধ্যে সোজা এম্বেড করা যায়।

   উদাহরণ:

   <h1>@greeting</h1>
   

Razor Syntax এর কিছু মূল বৈশিষ্ট্য

১. ভেরিয়েবল এবং এক্সপ্রেশন

Razor কোড ব্লকে C# ভেরিয়েবল বা এক্সপ্রেশন ব্যবহার করা সম্ভব। এগুলি HTML মার্কআপের মধ্যে @ সাইন দিয়ে প্রবেশ করানো হয়।

উদাহরণ:

@{
    var userName = "John";
}
<p>Hello, @userName!</p>

এই কোডে userName ভেরিয়েবলটি Hello, John! আউটপুট করবে।

২. লুপ (Loop)

Razor সিম্পল for, foreach, বা while লুপ ব্যবহার করার মাধ্যমে HTML পেজে ডাইনামিক কন্টেন্ট রেন্ডার করতে সহায়ক।

উদাহরণ (foreach loop):

@foreach (var item in items)
{
    <p>@item</p>
}

এই কোডে, items নামে একটি কালেকশন থেকে প্রতিটি আইটেম <p> ট্যাগের মধ্যে প্রদর্শিত হবে।

৩. কন্ডিশনাল লজিক (Conditional Logic)

Razor এ if-else কন্ডিশনাল স্টেটমেন্ট ব্যবহার করা যায়।

উদাহরণ:

@{
    var isAuthenticated = true;
}
@if (isAuthenticated)
{
    <p>Welcome back, user!</p>
}
else
{
    <p>Please log in.</p>
}

এই কোডে, isAuthenticated ভেরিয়েবলটি যদি true হয়, তাহলে "Welcome back, user!" দেখাবে, এবং যদি false হয়, তাহলে "Please log in." দেখাবে।

৪. এগজাম্পল কোড (Inline Expressions)

Razor সিনট্যাক্স আপনাকে HTML মার্কআপের মধ্যে সরাসরি C# এক্সপ্রেশন ব্যবহার করতে দেয়। এর ফলে, কোড লেখা অনেক সহজ হয়।

উদাহরণ:

<p>The current time is: @DateTime.Now</p>

এখানে, @DateTime.Now ডাইনামিকভাবে বর্তমান সময় দেখাবে।

৫. সাবলিমেট (Layout) এবং পার্টিয়াল ভিউ (Partial View)

Razor এ আপনি layout pages এবং partial views ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন অংশের কোড পুনঃব্যবহার করতে পারেন। এর মাধ্যমে অ্যাপ্লিকেশনের প্রতিটি পৃষ্ঠার জন্য একটি সাধারণ কাঠামো (যেমন: হেডার, ফুটার) বজায় রাখা সম্ভব হয়।

Layout Example:

@{
    Layout = "_Layout";
}

এখানে, _Layout ফাইলটি এই পৃষ্ঠার জন্য লেআউট হিসেবে ব্যবহৃত হবে।

Partial View Example:

@Html.Partial("_MyPartialView")

এখানে, _MyPartialView একটি পার্টিয়াল ভিউ ফাইল যা অন্য কোনো পৃষ্ঠার মধ্যে অন্তর্ভুক্ত হবে।

Razor Syntax এর অন্যান্য বৈশিষ্ট্য

১. কন্ট্রোলার থেকে ডেটা পাঠানো

Razor ভিউতে ডেটা পাঠানোর জন্য ViewData বা ViewBag ব্যবহার করা যেতে পারে।

ViewBag ব্যবহার:

<h1>@ViewBag.Title</h1>

Controller থেকে:

ViewBag.Title = "Welcome to Razor!";

২. Form সাবমিশন

Razor ফর্ম তৈরি করতে ব্যবহার করা যায়, যেখানে HTML form এবং C# কোড একসাথে ব্যবহার করা হয়।

উদাহরণ:

<form method="post">
    <input type="text" name="username" />
    <input type="submit" value="Submit" />
</form>

৩. HTML Helper Methods

Razor ভিউতে HTML Helpers ব্যবহার করে ডাইনামিক ফর্ম এলিমেন্ট এবং লিঙ্ক তৈরি করা সম্ভব।

উদাহরণ:

@Html.TextBox("username")
@Html.Password("password")

সারাংশ

Razor সিনট্যাক্স একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব পদ্ধতি, যা C# কোড এবং HTML একত্রে ব্যবহারের মাধ্যমে ডাইনামিক ওয়েব পেজ তৈরি করতে সাহায্য করে। এর সহজ ও পরিষ্কার সিনট্যাক্স ডেভেলপারদের দ্রুত এবং কার্যকরীভাবে অ্যাপ্লিকেশন ডেভেলপমেন্ট করতে সহায়ক।

Razor হলো একটি শীর্ষস্থানীয় view engine যা ASP.Net এ dynamic web pages তৈরির জন্য ব্যবহৃত হয়। Razor HTML এবং C# কোডের মধ্যে একটি সিম্পল এবং ইফিসিয়েন্ট সমন্বয় তৈরি করতে সক্ষম। এটি ASP.Net MVC এবং ASP.Net Core প্রজেক্টে ডাইনামিক কন্টেন্ট জেনারেট করার জন্য ব্যবহৃত হয়।

Razor এর বৈশিষ্ট্য

1. Simplicity: Razor এর সিম্পল এবং পরিষ্কার সিনট্যাক্স ডেভেলপারদের দ্রুত কোড লেখার সুযোগ দেয়। এটি HTML এবং C# কোডের মধ্যে সোজা মেশানোর সুবিধা প্রদান করে।
2. Integrates HTML with C#: Razor ব্যবহার করে HTML পেজের মধ্যে C# কোড সরাসরি এম্বেড করা যায়। এটি ডাইনামিক কন্টেন্ট তৈরির জন্য খুবই কার্যকরী।
3. Automatic Encoding: Razor স্বয়ংক্রিয়ভাবে ইউজার ইনপুট ইঙ্কোড করে, ফলে Cross-site Scripting (XSS) আক্রমণ থেকে সুরক্ষা প্রদান করে।
4. No Need for Closing Tags: Razor টেমপ্লেট কোডের জন্য ব্র্যাকেট এবং সেমিকোলন ব্যবহার করার প্রয়োজন হয় না, যা কোডটিকে আরো ক্লিন এবং সহজ করে তোলে।

Razor এর মৌলিক সিনট্যাক্স

Razor কোড সাধারণত @ সাইন দিয়ে শুরু হয় এবং HTML এর মধ্যে C# কোড ব্যবহার করতে এটি খুবই সহজ।

১. Razor কোড ব্লক

Razor কোড একটি code block হিসাবে লেখা হয়, যা @{} এর মধ্যে থাকে।

@{
    var greeting = "Hello, Razor!";
}

২. ভেরিয়েবল রেন্ডারিং

HTML এ C# ভেরিয়েবল ব্যবহার করার জন্য @ সাইন ব্যবহৃত হয়।

<h1>@greeting</h1>

এটি greeting ভেরিয়েবল এর মান HTML পেজে প্রদর্শন করবে।

৩. Conditionals (if, else) ব্যবহার

Razor টেমপ্লেটে if-else স্টেটমেন্ট ব্যবহার করা যায়।

@{
    var isLoggedIn = true;
}

@if (isLoggedIn)
{
    <p>Welcome back!</p>
}
else
{
    <p>Please log in.</p>
}

৪. Loops (foreach) ব্যবহার

Razor এ foreach লুপ ব্যবহার করে একটি ডেটা তালিকা প্রদর্শন করা যেতে পারে।

@{
    var products = new List<string> { "Apple", "Banana", "Orange" };
}

<ul>
@foreach (var product in products)
{
    <li>@product</li>
}
</ul>

Razor এবং HTML

Razor টেমপ্লেট কোড HTML এর মধ্যে C# কোড এম্বেড করে, যা ডাইনামিক ওয়েব পেজ তৈরি করতে সহায়তা করে।

Razor টেমপ্লেট উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <title>Welcome Page</title>
</head>
<body>
    <h1>Welcome to Razor</h1>
    <p>Today's date: @DateTime.Now</p>
</body>
</html>

উপরের কোডটি পেজে বর্তমান তারিখ প্রদর্শন করবে।

Razor এর ব্যবহার

1. ASP.Net MVC: Razor ভিউ ইঞ্জিনটি ASP.Net MVC অ্যাপ্লিকেশনে ডাইনামিক HTML রেন্ডার করার জন্য ব্যবহৃত হয়। Razor কোডটি Controller থেকে পাওয়া ডেটা ভিউতে রেন্ডার করে।
2. ASP.Net Core: ASP.Net Core প্রজেক্টে Razor এর ব্যবহার আরও শক্তিশালী, কারণ এটি কেবলমাত্র Windows নয়, অন্য অপারেটিং সিস্টেমে (Linux, macOS) সাথেও কাজ করে। Razor Pages ব্যবহার করে কমপ্যাক্ট এবং প্রেজেন্টেশন-ভিত্তিক ওয়েব অ্যাপ্লিকেশন তৈরি করা যায়।
3. Blazor: Razor ব্যবহার করে Blazor অ্যাপ্লিকেশনের UI components ডাইনামিকভাবে তৈরি করা হয়, যা .NET এভ্যাপ্লিকেশন তৈরি করার জন্য একটি নতুন ফ্রেমওয়ার্ক।

Razor এবং Razor Pages

Razor Pages হলো ASP.Net Core অ্যাপ্লিকেশনের একটি নতুন ফিচার, যা সিম্পল ও ইজি-টু-ইউজ ফিচার হিসেবে Razor ভিউয়ের সাথে ইন্টিগ্রেটেড। Razor Pages সাধারণত MVC আর্কিটেকচারের চেয়ে সরল এবং খুব কম কোডে ডাইনামিক ওয়েব পেজ তৈরি করতে সাহায্য করে।

Razor এর উপকারিতা

• Dynamic Content Rendering: Razor দিয়ে আপনি ডাইনামিক কন্টেন্ট যেমন ডেটাবেস থেকে তথ্য, ইউজার ইনপুট ইত্যাদি প্রদর্শন করতে পারবেন।
• Cleaner Code: Razor কোড সাধারণত সহজ এবং স্বচ্ছ হয়, যা ডেভেলপারদের জন্য কাজ করা সহজ করে তোলে।
• Seamless Integration with C#: Razor এবং C# এর মধ্যে একটি সিম্পল এবং সহজ সংযোগ তৈরি হয়, যার ফলে ডাইনামিক ওয়েব পেজ তৈরি করা যায় খুব সহজে।

সারাংশ

Razor একটি শক্তিশালী ভিউ ইঞ্জিন যা ASP.Net এবং ASP.Net Core প্রজেক্টে HTML এবং C# কোড একত্রিত করে ডাইনামিক কন্টেন্ট তৈরি করতে সহায়তা করে। এটি সহজ সিনট্যাক্স, নিরাপত্তা এবং প্রপার ফিচারের সাথে ASP.Net অ্যাপ্লিকেশনের জন্য একটি গুরুত্বপূর্ণ অংশ। Razor টেমপ্লেট সিস্টেমটি ডেভেলপারদের দ্রুত এবং কার্যকরভাবে ওয়েব অ্যাপ্লিকেশন তৈরি করতে সক্ষম করে।

Razor একটি view engine যা ASP.Net (বিশেষত ASP.Net Core MVC এবং ASP.Net MVC) এর সাথে ব্যবহার করা হয়। Razor সিম্পল, ক্লিন এবং ডাইনামিক HTML তৈরির জন্য ব্যবহৃত একটি টেমপ্লেটিং ভাষা। এটি C# কোডকে HTML কোডের মধ্যে একীভূত করার জন্য ব্যবহৃত হয় এবং ব্যবহারকারীর ইন্টারফেসের জন্য ডাইনামিক কন্টেন্ট রেন্ডার করতে সাহায্য করে।

Razor সিএসএস, জাভাস্ক্রিপ্ট বা HTML এর সঙ্গে C# কোডকে একত্রিত করার জন্য এক সহজ এবং কার্যকরী উপায় প্রদান করে। Razor ব্যবহার করার মাধ্যমে আপনি কার্যকরভাবে ভিউগুলিতে ডাইনামিক ডেটা এবং লজিক প্রক্রিয়াগুলি প্রয়োগ করতে পারেন।

Razor Syntax: মৌলিক ধারণা

Razor সিম্পল এবং স্বজ্ঞাত সিনট্যাক্স ব্যবহার করে C# কোড ইনজেক্ট করে HTML এ। Razor সিনট্যাক্সে @ চিহ্ন ব্যবহার করা হয় C# কোডের সঙ্গে HTML কোড মিশ্রিত করতে।

১. ডাইনামিক কনটেন্ট রেন্ডারিং

Razor সিনট্যাক্সে C# কোডের জন্য @ চিহ্ন ব্যবহার করা হয়, যা HTML এ কোডের রেন্ডারিংকে অনুমতি দেয়। যেমন:

<h1>Hello, @Model.Name!</h1>

এখানে, @Model.Name C# কোড যা Model অবজেক্টের Name প্রপার্টি দেখায়।

Razor Syntax: বিভিন্ন ফিচার

২. ভেরিয়েবল এবং এক্সপ্রেশনস

Razor এ আপনি HTML এর মধ্যে C# এক্সপ্রেশনও ব্যবহার করতে পারেন। @ চিহ্ন দিয়ে C# কোড ব্লক শুরু করা হয়। যেমন:

<p>Current Date: @DateTime.Now</p>

এখানে, Razor @DateTime.Now ব্যবহার করে বর্তমান তারিখ এবং সময় প্রদর্শন করবে।

৩. কন্ডিশনাল স্টেটমেন্টস

Razor এ C# এর if-else কন্ডিশনাল স্টেটমেন্ট ব্যবহার করা যায়:

@if (Model.IsLoggedIn)
{
    <p>Welcome back, @Model.UserName!</p>
}
else
{
    <p>Please log in to continue.</p>
}

এখানে, if-else কন্ডিশন ব্যবহার করে লগইন স্ট্যাটাসের ওপর ভিত্তি করে আলাদা মেসেজ দেখানো হচ্ছে।

৪. লুপ (Loops)

Razor এ C# এর for, foreach বা while লুপ ব্যবহার করা যায় ডাইনামিক ডেটা রেন্ডার করার জন্য। যেমন:

<ul>
@foreach(var item in Model.Items)
{
    <li>@item.Name</li>
}
</ul>

এখানে @foreach ব্যবহার করে Model.Items লিস্টের প্রতিটি আইটেমের নাম একটি <li> ট্যাগের মধ্যে প্রদর্শন করা হচ্ছে।

৫. ব্লক স্টেটমেন্টস

Razor এ @{ } সিঙ্কট্যাক্স ব্যবহার করে আপনি একাধিক C# কোড স্টেটমেন্ট একত্রিত করতে পারেন:

@{
    var greeting = "Hello, " + Model.UserName;
}
<p>@greeting</p>

এখানে @{ } ব্যবহার করে greeting ভেরিয়েবলটি ডিফাইন করা হয়েছে এবং তারপর তা HTML পেজে রেন্ডার করা হয়েছে।

৬. ফাংশন এবং মেথড কলিং

Razor এ C# ফাংশন বা মেথডও কল করা যায়। যেমন:

<p>Sum: @Add(5, 10)</p>
@functions {
    public int Add(int a, int b)
    {
        return a + b;
    }
}

এখানে @Add(5, 10) ব্যবহার করে একটি কাস্টম Add মেথড কল করা হয়েছে, যেটি দুটি সংখ্যার যোগফল প্রদান করবে।

Razor Syntax: ইন্টিগ্রেশন এবং ব্যবহার

Razor সিনট্যাক্স প্রজেক্টের Views ফোল্ডারে .cshtml ফাইল হিসেবে ব্যবহার করা হয়। ASP.Net Core MVC অ্যাপ্লিকেশন বা ASP.Net MVC অ্যাপ্লিকেশন তৈরি করার সময় এই Razor টেমপ্লেটগুলি তৈরি এবং ব্যবহৃত হয়।

৭. Razor পেজেসে ডাইনামিক ডেটা রেন্ডারিং

Razor ভিউ তে আপনি Model অবজেক্টের ডেটা রেন্ডার করতে পারেন। Model সাধারণত Controller থেকে ভিউতে পাস করা হয়।

@model YourNamespace.Models.Product
<h1>@Model.Name</h1>
<p>@Model.Description</p>
<p>Price: @Model.Price</p>

এখানে, @Model দিয়ে Product মডেলের ডেটা ভিউতে রেন্ডার হচ্ছে।

৮. Razor এবং Partial Views

Razor টেমপ্লেটে Partial Views ব্যবহার করা যায়, যেখানে নির্দিষ্ট অংশের HTML বা C# কোড অন্য একটি ভিউ ফাইল থেকে রেন্ডার করা হয়। যেমন:

@Html.Partial("_ProductList", Model)

এখানে _ProductList হলো একটি Partial View যা নির্দিষ্ট ডেটা রেন্ডার করতে সাহায্য করবে।

Razor Syntax: নিরাপত্তা

Razor স্বয়ংক্রিয়ভাবে HTML encoding ব্যবহার করে আক্রমণ থেকে রক্ষা করে, অর্থাৎ আপনি যদি HTML বা JavaScript ইনপুট গ্রহণ করেন তবে এটি স্বয়ংক্রিয়ভাবে সেগুলিকে সঠিকভাবে এনকোড করে যা Cross-Site Scripting (XSS) আক্রমণ থেকে সুরক্ষা দেয়।

উদাহরণ:

<p>@Model.UserInput</p>

এখানে @Model.UserInput ইনপুটটিকে নিরাপদভাবে HTML তে রেন্ডার করবে।

Razor Syntax ব্যবহার করতে কিছু পরামর্শ

1. নিরাপত্তা: ডাইনামিক ডেটা রেন্ডার করার সময় সবসময় Razor এ @ চিহ্ন ব্যবহার করে ডেটা ইনপুট করুন, যাতে XSS আক্রমণ থেকে সুরক্ষা নিশ্চিত করা যায়।
2. ব্লক কোডের জন্য @{ } ব্যবহার করুন।
3. হালকা লজিক ব্যবহার করতে, Razor এর মধ্যে কোড এবং HTML কোড মিশ্রিত করতে পারবেন। তবে কোড ব্লক কমপ্যাক্ট রাখুন, যেন সহজে বুঝতে পারেন।

সারাংশ

Razor সিনট্যাক্স ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনগুলিতে ডাইনামিক HTML পেজ তৈরির জন্য একটি শক্তিশালী টুল। এটি HTML এবং C# কোডের মিশ্রণ সম্ভব করে, যা ডেভেলপারদের ডাইনামিক কন্টেন্ট, লজিক এবং ভিউ তৈরি করার সুবিধা দেয়। Razor সিনট্যাক্স সহজ, কার্যকর এবং ব্যবহারকারীকে একত্রিত HTML এবং কোড ব্যবহারের জন্য নির্ভরযোগ্য একটি উপায় প্রদান করে।

Razor হলো একটি view engine যা ASP.Net প্রজেক্টে ডায়নামিক HTML কন্টেন্ট তৈরি করতে ব্যবহৃত হয়। এটি Model-View-Controller (MVC) অ্যাপ্লিকেশনের মধ্যে View স্তরে ব্যবহৃত হয় এবং C# কোডকে HTML এর সাথে একত্রিত করতে সাহায্য করে। Razor ব্যবহার করে আপনি ডায়নামিক কন্টেন্ট সহজেই তৈরি এবং প্রদর্শন করতে পারবেন।

Razor এর মৌলিক ধারণা

• Razor Syntax: Razor সিনট্যাক্স খুবই সরল এবং এটি HTML এর মধ্যে C# কোড এম্বেড করার জন্য ব্যবহার করা হয়। Razor কোড সবসময় @ চিহ্ন দিয়ে শুরু হয়।

  উদাহরণ:

  <h1>@DateTime.Now</h1>
  

• Razor এক্সপ্রেশন সাধারণত HTML এর মধ্যে ডায়নামিক ডেটা রেন্ডার করার জন্য ব্যবহৃত হয়, যেমন:
  • মডেল ডেটা প্রদর্শন
  • লুপ এবং কন্ডিশনাল লজিক

Razor ভিউ ফাইল

Razor ভিউ ফাইলের এক্সটেনশন হলো .cshtml (C# Razor HTML)। এই ফাইলগুলো Views ফোল্ডারে থাকে এবং Controller এর মাধ্যমে ডাটা পাঠিয়ে প্রদর্শন করা হয়।

উদাহরণ:

• HomeController.cs (Controller)

  public class HomeController : Controller
  {
      public IActionResult Index()
      {
          var products = new List<string> { "Laptop", "Mobile", "Tablet" };
          return View(products);  // View এ ডাটা পাঠানো হচ্ছে
      }
  }
  

• Index.cshtml (View)

  <h1>Product List</h1>
  <ul>
      @foreach(var product in Model)
      {
          <li>@product</li>  <!-- Model থেকে ডাটা প্রদর্শন -->
      }
  </ul>
  

এখানে HomeController এর Index অ্যাকশন মেথডের মাধ্যমে একটি ডাটা লিস্ট View (Index.cshtml) তে পাঠানো হয়েছে। @foreach লুপের মাধ্যমে প্রতিটি প্রোডাক্টের নাম HTML লিস্ট হিসেবে প্রদর্শিত হচ্ছে।

Razor এ ডায়নামিক ডেটা প্রদর্শন

Razor ব্যবহার করে আপনি বিভিন্ন ডায়নামিক ডেটা HTML পেজে দেখাতে পারেন, যেমন:

১. ডেটা রেন্ডারিং

• Model থেকে ডেটা প্রদর্শন:

  <h2>@Model.Title</h2>
  <p>@Model.Description</p>
  

• কন্ডিশনাল লজিক ব্যবহার:

  @if (Model.IsAvailable)
  {
      <p>The item is available!</p>
  }
  else
  {
      <p>The item is out of stock.</p>
  }
  

২. লুপ ব্যবহার

• foreach লুপ ব্যবহার:

  <ul>
      @foreach(var item in Model.Items)
      {
          <li>@item.Name</li>
      }
  </ul>
  

৩. ফর্ম ডাটা প্রদর্শন

Razor ব্যবহার করে আপনি HTML ফর্ম তৈরি করতে পারেন এবং সেই ফর্ম থেকে ডেটা প্রসেস করতে পারেন:

• TextBox, Dropdown, Button:

  <form method="post">
      <input type="text" name="username" />
      <select name="country">
          <option>USA</option>
          <option>Canada</option>
      </select>
      <button type="submit">Submit</button>
  </form>
  

Razor এর অন্যান্য বৈশিষ্ট্য

১. Partial Views

• Partial Views ছোট টুকরো ভিউ হিসেবে ব্যবহৃত হয় যা একাধিক ভিউয়ের মধ্যে পুনঃব্যবহারযোগ্য। উদাহরণস্বরূপ, আপনি একটি অংশবিশেষ (যেমন: ন্যাভিগেশন বার বা ফুটার) পুরো অ্যাপ্লিকেশনজুড়ে ব্যবহার করতে পারেন।

  উদাহরণ:

  @Html.Partial("_NavigationBar")
  

২. Layouts

• Layouts Razor ভিউয়ের জন্য একটি সাধারণ স্কেলেবল কাঠামো। এটি মূলত একটি সাধারণ শিরোনাম বা পাদটীকা সংযুক্ত করতে ব্যবহৃত হয় যা সমস্ত ভিউতে পুনঃব্যবহারযোগ্য।

  উদাহরণ:

  @layout "_MainLayout"
  

৩. @RenderBody() এবং @RenderSection()

• @RenderBody(): এটি লেআউট পৃষ্ঠায় সাধারণভাবে সমস্ত ভিউ কন্টেন্ট প্রদর্শন করে।

• @RenderSection(): এটি নির্দিষ্ট বিভাগে কাস্টম কন্টেন্ট যুক্ত করতে ব্যবহৃত হয়।

  উদাহরণ:

  @section Scripts
  {
      <script src="~/js/custom.js"></script>
  }
  

Razor এর মাধ্যমে ডায়নামিক কন্টেন্ট প্রদর্শনের সুবিধা

• সিম্পল সিনট্যাক্স: Razor কোড খুবই সোজা এবং HTML এর মধ্যে C# কোড এম্বেড করা যায়।
• কন্ডিশনাল লজিক: if, else, for, foreach ইত্যাদি ব্যবহার করে ডায়নামিক কন্টেন্ট তৈরি করা যায়।
• Model-View-Controller (MVC) এর সাথে সমন্বয়: Razor খুব সহজে Controller থেকে Model ডেটা গ্রহণ করে এবং তা View-এ প্রদর্শন করতে সহায়ক।
• ফর্মস এবং ইউজার ইনপুট: Razor ফর্ম তৈরি এবং ইউজারের ইনপুট প্রক্রিয়া সহজতর করে।

সারাংশ

Razor হলো ASP.Net MVC বা ASP.Net Core অ্যাপ্লিকেশনগুলির জন্য একটি শক্তিশালী view engine, যা HTML এবং C# কোডকে একত্রিত করে ডায়নামিক কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। Razor এর মাধ্যমে সহজেই ডেটা প্রদর্শন, কন্ডিশনাল লজিক এবং লুপ ব্যবহার করা যায়। এটি MVC আর্কিটেকচারের সাথে সমন্বিত হয়ে ডেভেলপমেন্ট প্রক্রিয়াকে আরও সোজা এবং দ্রুত করে।

ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনগুলোতে Layouts এবং Partials ব্যবহৃত হয় সাধারণভাবে পুনঃব্যবহারযোগ্য UI অংশ তৈরি করার জন্য। এই দুটি কনসেপ্ট অ্যাপ্লিকেশনের ভিউ লেয়ারের কাঠামোকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে। এখানে আমরা বিস্তারিতভাবে Layouts এবং Partials এর কাজ এবং ব্যবহারের পদ্ধতি আলোচনা করব।

Layouts

Layouts একটি সাধারণ পেজ কাঠামো বা টেমপ্লেট হিসেবে কাজ করে, যা সমস্ত পেজে পুনরায় ব্যবহার করা হয়। এটি একটি common structure প্রদান করে, যেমন: হেডার, ফুটার, ন্যাভিগেশন বার, যা একাধিক ভিউ বা পেজে ব্যবহৃত হতে পারে।

Layout ব্যবহার করার সুবিধা:

• কোড পুনঃব্যবহার: হেডার, ফুটার, নেভিগেশন বার একাধিক পেজে একবার ব্যবহার করলেই হয়।
• কনসিস্টেন্সি: সব পেজে একই লেআউট ব্যবহারের ফলে কনসিস্টেন্ট ইউজার ইন্টারফেস প্রদান করা যায়।

Layout সেটআপ

1. _Layout.cshtml ফাইল তৈরি:

   • সাধারণত, Views/Shared/_Layout.cshtml নামক ফাইলটি Shared ফোল্ডারে রাখা হয় এবং এটি অ্যাপ্লিকেশনের মূল লেআউট হিসেবে কাজ করে।
   • এখানে সাধারণত HTML, CSS, এবং JavaScript কোড থাকে যা প্রতিটি পেজে ব্যবহৃত হয় (যেমন: হেডার, ফুটার, সাইডবার)।

   উদাহরণ (প্রাথমিক _Layout.cshtml):

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8" />
       <title>@ViewData["Title"]</title>
       <link rel="stylesheet" href="~/css/site.css" />
   </head>
   <body>
       <header>
           <nav>
               <ul>
                   <li><a href="/">Home</a></li>
                   <li><a href="/About">About</a></li>
                   <li><a href="/Contact">Contact</a></li>
               </ul>
           </nav>
       </header>
   
       <main>
           @RenderBody()
       </main>
   
       <footer>
           <p>© @DateTime.Now.Year - My ASP.Net Application</p>
       </footer>
   </body>
   </html>
   

2. Layout ব্যবহার করা:

   • প্রতিটি ভিউতে লেআউট ব্যবহার করতে, @Layout ডিরেকটিভ ব্যবহার করতে হয়। সাধারণত, এটি ভিউ ফাইলের শীর্ষে ব্যবহার করা হয়।

   উদাহরণ:

   @layout "_Layout.cshtml"
   

   • যদি আপনি ASP.Net Core MVC ব্যবহার করেন, তাহলে এটি সাধারনভাবে Views/_ViewStart.cshtml ফাইলে ডিফাইন করা হয়:

   @{
       Layout = "_Layout";
   }
   

3. RenderBody():
   • লেআউট ফাইলে @RenderBody() ডিরেকটিভের মাধ্যমে মূল কনটেন্ট (যে ভিউটি ব্যবহার হচ্ছে) সেটি ইনজেক্ট করা হয়। প্রতিটি ভিউ RenderBody থেকে নিজের কন্টেন্ট পাঠায়।

Partials

Partials হল ছোট ভিউ অংশ যা কোনও নির্দিষ্ট UI ফিচার বা উপাদান পুনঃব্যবহারযোগ্য করতে ব্যবহৃত হয়। পার্শিয়াল ভিউগুলি সাধারণত একাধিক স্থানে ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি product list বা login form একটি পার্শিয়াল ভিউ হতে পারে, যা অনেক পেজে ব্যবহার করা হবে।

Partial ব্যবহার করার সুবিধা:

• কোড পুনঃব্যবহার: একাধিক ভিউতে একই UI কম্পোনেন্ট ব্যবহারের জন্য পার্শিয়াল ভিউ ব্যবহার করা হয়।
• অধিক সংগঠিত কোড: ছোট ছোট অংশে ভিউ ভাগ করে কোডের পরিস্কারতা এবং রক্ষণাবেক্ষণ সহজ করা হয়।

Partial তৈরি ও ব্যবহার

1. Partial ভিউ তৈরি করা:

   • সাধারণত, পার্শিয়াল ভিউগুলি Views/Shared ফোল্ডারে রাখা হয়। এগুলি .cshtml ফাইল হয়।

   উদাহরণ: _ProductList.cshtml নামে একটি পার্শিয়াল ভিউ তৈরি করা।

   @model IEnumerable<MyApp.Models.Product>
   <div class="product-list">
       @foreach (var product in Model)
       {
           <div class="product-item">
               <h3>@product.Name</h3>
               <p>@product.Description</p>
               <span>@product.Price</span>
           </div>
       }
   </div>
   

2. Partial ভিউ ব্যবহার করা:

   • আপনি যে ভিউতে পার্শিয়াল ভিউ ব্যবহার করতে চান, সেখানে @Html.Partial() বা @await Html.PartialAsync() ডিরেকটিভ ব্যবহার করতে হবে।

   উদাহরণ:

   @Html.Partial("_ProductList", Model.Products)
   

   • @Html.Partial() সাধারণত সিঙ্ক্রোনাস পার্শিয়াল রেন্ডারিং জন্য ব্যবহৃত হয়, তবে @await Html.PartialAsync() অ্যাসিঙ্ক্রোনাস পার্শিয়াল রেন্ডারিং এর জন্য ব্যবহৃত হয় (যখন ডেটা লোড হতে পারে)।

   উদাহরণ (Asynchronous):

   @await Html.PartialAsync("_ProductList", Model.Products)
   

Layout এবং Partial এর পার্থক্য

সারাংশ

• Layouts মূলত অ্যাপ্লিকেশনের পুরো পেজের কাঠামো নির্ধারণ করে, যেখানে আপনার অ্যাপ্লিকেশনের সাধারণ উপাদানগুলো যেমন হেডার, ফুটার, নেভিগেশন বার থাকে।
• Partials ছোট, পুনঃব্যবহারযোগ্য ভিউ অংশ হিসেবে কাজ করে, যেগুলি একাধিক পেজে ব্যবহার করা যায়।

এই দুটি কনসেপ্ট ব্যবহার করে আপনি আপনার ASP.Net প্রজেক্টের UI কে আরো পরিষ্কার, সংগঠিত এবং পুনঃব্যবহারযোগ্য করে তুলতে পারবেন।

Razor হল একটি view engine যা ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনগুলিতে ডায়নামিক HTML তৈরি করতে ব্যবহৃত হয়। Razor-এর মাধ্যমে আপনি C# কোডকে HTML-এর সাথে সহজে একত্রিত করতে পারেন, যার ফলে আপনি ডায়নামিকভাবে ডেটা প্রদর্শন করতে এবং ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে পারেন। Razor HTML এবং CSS-এর সাথে সহজেই ইন্টিগ্রেট করা যায়, যা ASP.Net অ্যাপ্লিকেশনগুলিকে আরও গতিশীল এবং ব্যবহারকারী-বান্ধব করে তোলে।

Razor এবং HTML/CSS ইন্টিগ্রেশন

Razor এবং HTML এর সংমিশ্রণ

Razor কোড HTML এর মধ্যে এম্বেড করা হয়। এটি সাধারণত @ সাইন দ্বারা চিহ্নিত হয়, যা C# কোডের ইনপুট বা আউটপুট প্রকাশ করে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে Razor কোড HTML-এর মধ্যে ব্যবহার করা হচ্ছে:

উদাহরণ: Razor এবং HTML একত্রিত করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Razor with HTML</title>
</head>
<body>
    <h1>@ViewData["Title"]</h1>
    <p>Today's date is: @DateTime.Now.ToString("dd-MM-yyyy")</p>
</body>
</html>

এখানে @ViewData["Title"] এবং @DateTime.Now.ToString("dd-MM-yyyy") Razor কোড HTML-এর মধ্যে এম্বেড করা হয়েছে। @ViewData হল একটি dictionary যা কন্ট্রোলার থেকে ভিউতে ডেটা পাঠাতে ব্যবহৃত হয়।

Razor এবং CSS এর সংমিশ্রণ

Razor ভিউতে CSS সংযোজন করার জন্য, আপনি সাধারণ HTML <link> ট্যাগ ব্যবহার করতে পারেন যেটি আপনার CSS ফাইলকে লিঙ্ক করে। এটি আপনি wwwroot ফোল্ডারে রাখবেন (যেখানে সমস্ত স্ট্যাটিক ফাইল রাখা হয়)।

উদাহরণ: Razor এবং CSS একত্রিত করা

1. CSS ফাইল তৈরি করা:

   • প্রথমে wwwroot/css ফোল্ডারে একটি CSS ফাইল তৈরি করুন, যেমন styles.css।

   styles.css:

   body {
       font-family: Arial, sans-serif;
       background-color: #f0f0f0;
   }
   
   h1 {
       color: #333;
   }
   

2. CSS ফাইল Razor ভিউতে যুক্ত করা:

   • Razor ভিউতে CSS ফাইলটি <link> ট্যাগের মাধ্যমে যুক্ত করুন।

   Razor View (Index.cshtml):

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Razor with HTML and CSS</title>
       <link rel="stylesheet" href="~/css/styles.css">
   </head>
   <body>
       <h1>@ViewData["Title"]</h1>
       <p>Today's date is: @DateTime.Now.ToString("dd-MM-yyyy")</p>
   </body>
   </html>
   

এখানে href="~/css/styles.css" Razor সিনট্যাক্স দ্বারা wwwroot/css/styles.css ফাইলটি সঠিকভাবে যুক্ত করা হয়েছে।

Razor এবং CSS ইনলাইন স্টাইল

আপনি Razor ভিউতে CSS এর ইনলাইন স্টাইলও ব্যবহার করতে পারেন। এতে প্রতিটি HTML ট্যাগের মধ্যে সরাসরি স্টাইল প্রয়োগ করা হয়। উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Razor with Inline CSS</title>
</head>
<body style="background-color: #f0f0f0; font-family: Arial, sans-serif;">
    <h1 style="color: #333;">@ViewData["Title"]</h1>
    <p>Today's date is: @DateTime.Now.ToString("dd-MM-yyyy")</p>
</body>
</html>

এখানে style="background-color: #f0f0f0;" CSS কোড সরাসরি HTML ট্যাগে ব্যবহৃত হয়েছে।

Razor এবং CSS এর মধ্যে কাস্টম ডাইনামিক ক্লাস অ্যাসাইনমেন্ট

Razor ব্যবহার করে আপনি CSS ক্লাসগুলোকে ডায়নামিকভাবে অ্যাসাইন করতে পারেন, অর্থাৎ, আপনি কোডের মাধ্যমে CSS ক্লাস যুক্ত বা পরিবর্তন করতে পারেন।

উদাহরণ: Razor এবং ডাইনামিক CSS ক্লাস অ্যাসাইনমেন্ট

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Razor with Dynamic CSS</title>
    <link rel="stylesheet" href="~/css/styles.css">
</head>
<body>
    <h1 class="@ViewData["TitleClass"]">@ViewData["Title"]</h1>
    <p>Today's date is: @DateTime.Now.ToString("dd-MM-yyyy")</p>
</body>
</html>

এখানে, @ViewData["TitleClass"] Razor কোড ব্যবহার করে class অ্যাট্রিবিউট ডাইনামিকভাবে সেট করা হয়েছে। আপনি কন্ট্রোলার থেকে ডাইনামিক CSS ক্লাস পাঠাতে পারেন:

public IActionResult Index()
{
    ViewData["Title"] = "Welcome to Razor!";
    ViewData["TitleClass"] = "highlight";  // CSS ক্লাসের নাম
    return View();
}

এখানে highlight CSS ক্লাসটি Razor ভিউতে ডায়নামিকভাবে অ্যাসাইন করা হয়েছে।

Razor এবং CSS মিডিয়া কোয়ারি

CSS মিডিয়া কোয়ারি ব্যবহার করে আপনি ভিউতে বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা স্টাইল প্রয়োগ করতে পারেন। Razor ভিউতে মিডিয়া কোয়ারি কাস্টমাইজেশনও করা সম্ভব।

উদাহরণ: Razor এবং মিডিয়া কোয়ারি

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Razor with Media Queries</title>
    <link rel="stylesheet" href="~/css/styles.css">
</head>
<body>
    <h1>@ViewData["Title"]</h1>
    <p>Today's date is: @DateTime.Now.ToString("dd-MM-yyyy")</p>

    <style>
        @media only screen and (max-width: 600px) {
            body {
                background-color: lightblue;
            }
        }
    </style>
</body>
</html>

এখানে @media only screen and (max-width: 600px) CSS মিডিয়া কোয়ারি ব্যবহার করা হয়েছে, যা স্ক্রীনের আকারের উপর ভিত্তি করে স্টাইল পরিবর্তন করে।

সারাংশ

• Razor ব্যবহার করে HTML এবং CSS ইন্টিগ্রেট করা খুবই সহজ এবং কার্যকর। Razor সিনট্যাক্সের মাধ্যমে ডায়নামিক HTML তৈরি করা যায়, এবং HTML এবং CSS এর সাথে Razor কোড সংযুক্ত করা যায়।
• আপনি Razor ভিউতে স্ট্যাটিক বা ইনলাইন CSS স্টাইল ব্যবহার করতে পারেন, অথবা ডাইনামিকভাবে CSS ক্লাস এবং মিডিয়া কোয়ারি ব্যবহার করে ভিউ কাস্টমাইজ করতে পারেন।
• Razor এবং CSS একত্রিত করে আপনি আরও সুন্দর এবং ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে পারেন।